<template>
        <div class="progress">
                <h3>会签流程</h3>
                <table class="tabs" cellpadding="0" cellspacing="0">
                        <tr>
                                <td colspan="6">基础信息</td>
                        </tr>
                        <tr>
                                <td>发起人</td>
                                <td>{{tableData.createUserName}}</td>
                                <td>发起时间</td>
                                <td>{{getTimeString(tableData.createTime)}}</td>
                                <td></td>
                                <td></td>
                        </tr>
                        <tr>
                               <td colspan="6">合同信息</td>
                        </tr>
                        <tr>
                                <td>合同名称：</td>
                                <td>{{tableData.contractName}}</td>
                                <td>合同编号：</td>
                                <td>{{tableData.contractCode}}</td>
                                <td>合同类型：</td>
                                <td>{{creatUserName.name}}</td>
                        </tr>
                        <tr>
                                <td>收支类型：</td>
                                <td>{{tableData.budgetType |initbudgetType}}</td>
                                <td>合同性质：</td>
                                <td>{{tableData.contractNature |initcontractNature}}</td>
                                <td>合同截止日期：</td>
                                <td>{{getTimeString(tableData.contractEndTime)}}</td>
                        </tr>
                        <tr>
                                <td>收款方：</td>
                                <td>{{tableData.receivablesName}}</td>
                                <td>付款方：</td>
                                <td>{{tableData.payerName}}</td>
                                <td>合同金额(含税)：</td>
                                <td>{{tableData.contractAmount}}</td>
                        </tr>
                        <tr>
                                <td>经办人：</td>
                                <td>{{tableData.contractOperatorName}}</td>
                                <td>联系电话：</td>
                                <td>{{tableData.contractOperatorPhone}}</td>
                                <td></td>
                                <td></td>
                        </tr>
                        <tr>
                                <td>合同详情：</td>
                                <td><a href="javascript:void(0);" @click="lookdetail">合同详情</a></td>
                                <td>合同文本及附件</td>
                                <td><a href="javascript:void(0);" @click="lookdetails">详情</a></td>
                                <td></td>
                                <td></td>
                        </tr>
                </table>
                <h4 style="margin:15px 0;text-align:center;">操作记录</h4>
                <table class="tabs" cellpadding="0" cellspacing="0">
                        <tr>
                                <td style="width:20%">操作</td>
                                <td style="width:20%">操作人</td>
                                <td style="width:20%">角色</td>
                                <td style="width:20%">时间</td>
                                <td style="width:20%">理由</td>
                        </tr>
                        <tr v-for="item in tableData.operations">
                                <td>{{item.operationContent}}</td>
                                <td>{{item.createUsername}}</td>
                                <td>{{item.roleName}}</td>
                                <td>{{item.createTimeStr}}</td>
                                <td>{{item.operateReason}}</td>
                        </tr>
                </table>
        </div>
</template>

<script>
import api from '@/api/apiPath'
export default {
        data(){
                return {
                        id:this.$route.query.contractId,
                        tableData:[],
                        creatUserName:""
                }
        },
        filters:{
                initbudgetType(cellValue){
                        if(cellValue==0){return "收入类"}
                        if(cellValue==1){return "支出类"}
                },
                initcontractNature(cellValue){
                        if(cellValue==0){return "框架合同"}
                        if(cellValue==1){return "主合同"}
                        if(cellValue==2){return "分合同"}
                }
        },
        methods:{
                loadData(){
                        this.axios.get(api.CONTRACTLOOK+"/"+this.id).then((res)=>{
                                if(res.data.code==200){
                                        this.tableData=res.data.data;
                                        this.creatUserName=res.data.data.contractTypeManage
                                }
                        }).catch((error)=>{
                                console.log(error);
                        })
                },
                getTimeString (timestamp) {
                        if (timestamp) {
                                const time = new Date(timestamp)
                                let dateStr = ''
                                const year = time.getFullYear()
                                const month = String(time.getMonth() + 1).length === 1 ? '0' + (time.getMonth() + 1) : (time.getMonth() + 1)
                                const day = String(time.getDate()).length === 1 ? '0' + time.getDate() : time.getDate()
                                dateStr = year + '-' + month + '-' + day
                                let timeStr = ''
                                const hours = time.getHours()
                                const hh = String(hours).length === 1 ? '0' + hours : hours
                                const minutes = time.getMinutes()
                                const mm = String(minutes).length === 1 ? '0' + minutes : minutes
                                const seconds = time.getSeconds()
                                const ss = String(seconds).length === 1 ? '0' + seconds : seconds
                                timeStr = `${hh}:${mm}:${ss}`
                                // timeStr = `${hh}:${mm}`
                                return dateStr + ' ' + timeStr
                                // return dateStr
                        } else {
                                return ''
                        }
                },
                lookdetail(){
                        this.$router.push({
                                path:"/contractaddoredit",
                                query:{
                                        type:"look",
                                        contractId:this.id
                                }
                        })
                },
                lookdetails(){
                        this.$router.push({
                                path:"/contractaddoredit",
                                query:{
                                        type:"look",
                                        contractId:this.id,
                                        pos:3
                                }
                        })
                }
        },
        mounted(){
                this.loadData()
        }
}
</script>

<style lang="stylus">
    .progress{
        .tabs{
                border-top:1px solid #ccc;
                border-left:1px solid #ccc;
                border-collapse: collapse;
                width: 100%;
                text-align: center;
                td{
                        word-break:break-all;
                        border-bottom:1px solid #ccc;
                        border-right:1px solid #ccc;
                        padding: 15px 0;
                }
        }
    }
</style>
